<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>canvas</title>
    <style>
    </style>
</head>
<body>
<canvas id="canvas">
    您的浏览器不支持Canvas，请升级浏览器
</canvas>
<script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');
    ctx.canvas.width = 600;
    ctx.canvas.height = 400;
    ctx.beginPath();
    ctx.translate(200, 200);
    ctx.arc(0, 0, 50, 0, Math.PI * 2, true);
    ctx.closePath();
    var linearGradient = ctx.createLinearGradient(-45, -45, 45, 45);
    linearGradient.addColorStop(0, 'rgb(255,165,0)');
    linearGradient.addColorStop(0.5, 'rgb(255,218,185)');
    linearGradient.addColorStop(1, 'rgb(135,206,235)');
    ctx.fillStyle = linearGradient;
    ctx.fill();
</script>
</body>
</html>